<template>
  <div>
    <!-- 第一个card 放 查增刷 （表单form和div） -->
    <el-card class="box-card">
      <!-- 行内表单 不要所有的v-model lable select下拉框-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="请输入关键字" v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button :disabled="disabled" type="primary" @click="query_cancel">返回</el-button>
        </el-form-item> -->
      </el-form>
      <!-- 下面两个是右侧纯手写的单独div 存放新增和刷新按钮 -->
      <div>
        <el-button type="primary" class="el-icon-plus" @click="add">新增</el-button>
        <el-button type="primary" class="el-icon-refresh" @click="getOrrefresh">刷新</el-button>
      </div>
      <!-- 第一个card 搞完以后有样式，就是老胡的老手法，让from和div 左右bewteen -->
    </el-card>

    <!-- 第二个card 放 CURD 界面 （表格）-->
    <el-card>
      <!-- 选自定义表格 只要<el-table-column label=xxx>它里面的<template slot-scope="scope">,它用{{}},操作的<el-table-column> 两个按钮要补充type和inco 自己记一下名字-->
      <el-table :data="
        realtableData.slice(
          (pagination.currentPage - 1) * pagination.pageSize,
          pagination.currentPage * pagination.pageSize
        )
      " style="width: 100%">
        <el-table-column label="序号" width="150">
          <template slot-scope="scope">
            {{
                scope.$index +
                1 +
                (pagination.currentPage - 1) * pagination.pageSize
            }}
          </template>
</el-table-column>
<el-table-column label="Guid" width="120">
    <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
</el-table-column>
<el-table-column label="名称" width="120">
    <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
</el-table-column>
<el-table-column label="作者" width="120">
    <template slot-scope="scope">
            {{ scope.row.password }}
          </template>
</el-table-column>
<el-table-column label="日期" width="120">
    <template slot-scope="scope">
            {{ scope.row.createdAt }}
          </template>
</el-table-column>
<el-table-column label="操作">
    <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" circle
              @click="handleEdit(scope.$index, scope.row)"></el-button>

            <el-button type="danger" size="mini" icon="el-icon-delete" circle
              @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
</el-table-column>
</el-table>
<!-- 第二个card 搞完后不需要搞样式 -->
</el-card>

<!-- 第三个card 放新增编辑的对话框 -->
<el-card>
    <!-- 选自定义内容的第二个Form的dialog，除了活动区域其他基本照抄但是:label-width不要，所以目前就绑定两个值是否展现dialogFormVisible和form对象 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <!-- 绑定form对象，可以双向绑定该对象的所有属性值(框框中的值) -->
        <el-form :model="form">
            <el-form-item label="姓名">
                <el-input v-model="form.Username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.Password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="评论">
                <el-input v-model="form.Remarks" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 第三个card 也不需要另外的样式 -->
</el-card>
<!-- 页码 -->
<el-card>
    <!-- 分页 -->
    <div class="pagination" style="float: right; padding-right: 200px">
        <el-pagination layout="total,sizes,prev,pager,next,jumper" :page-sizes="[10, 20, 50]" :page-size="pagination.pageSize" :current-page="pagination.currentPage" :total="realtableData.length" @current-change="handleHistoryCurrentChange" @size-change="handleHistorySizeChange"></el-pagination>
    </div>
</el-card>
</div>
</template>

<script>
    // const axios = require("axios");
    import {
        userlist,
        updateuser,
        register,
        deleteuser,
        queryuser
    } from '@/api/user'

    export default {
        data() {
            return {
                //对话框
                dialogFormVisible: false,
                form: {
                    Id: "",
                    Username: "",
                    Password: "",
                    AvatarId: "",
                    Remarks: ""
                },
                title: "", //title区分新增或编辑

                //数据
                realtableData: [],
                //查找
                keyword: "",
                //查询返回框
                // disabled: true,
                //分页
                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                },
            };
        },
        methods: {
            //获取数据或刷新数据
            getOrrefresh() {
                userlist().then(res => {
                    console.log(res);
                    this.realtableData = res
                })
            },
            //删除物品
            handleDelete(index, row) {
                console.log(row.id);
                deleteuser(row.id).then(res => {
                    console.log(res);
                })
            },
            //添加物品
            add() {
                this.title = "新增";
                //让this.form.id 重新为空，防止下次把新增认为编辑,这里我没有使用$ref的清除属性
                this.form.Id = "00000000-0000-0000-0000-000000000000";
                this.form.Username = "";
                this.form.Password = "";
                this.form.AvatarId = "00000000-0000-0000-0000-000000000000";
                this.form.Remarks = "简单介绍一下自己吧^.^"; //新增先不需要填这个，因为是公共属性，应该在修改时候添加
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                console.log(row);
                this.title = "编辑";
                this.form.Id = row.id;
                this.form.Username = row.username;
                this.form.Password = row.password;
                this.form.AvatarId = "00000000-0000-0000-0000-000000000000" //默认传,但后端不会修改
                this.form.Remarks = row.remarks;
                this.dialogFormVisible = true;
            },
            //保存
            save() {
                console.log(this.form);
                //编辑
                if (this.form.Id != "00000000-0000-0000-0000-000000000000") {
                    updateuser(this.form).then(res => {
                        console.log(res);
                    })
                }
                //新增
                else {
                    register(this.form).then(res => {
                        console.log(res);
                    })
                }
                this.dialogFormVisible = false;
            },
            //取消保存
            cancel() {
                this.dialogFormVisible = false;
            },
            //查找
            query() {
                console.log(this.keyword);
                if (this.keyword == '') {
                    this.getOrrefresh()
                } else {
                    queryuser(this.keyword).then(res => {
                        console.log(res);
                        this.realtableData = res
                    })
                }
                this.keyword = "";
            },
            //分页
            handleHistoryCurrentChange(val) {
                this.pagination.currentPage = val;
            },
            handleHistorySizeChange(val) {
                this.pagination.pageSize = val;
            },
        },
        //获取数据源
        created: function() {
            // this.getOrrefresh()
        },
    };
</script>

<style>
    .el-card__body {
        display: flex;
        justify-content: space-between;
    }
</style>